<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="../assets/images/logo.png">
    <title>Document</title>

    <!-- 引入css：elementUi、bootstrap、bootstrap-icons、normalize统一规范、index -->
    <link rel="stylesheet" href="../node_modules/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-icons/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="../assets/css/normalize.css">
    <link rel="stylesheet" href="../assets/css/index.css">

    <!-- 引入JS：vue、elementUI、jQuery、bootstrap -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script src="../node_modules/element-ui/lib/index.js"></script>
    <script src="../node_modules/jQuery/tmp/jquery.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script>
    <!-- 引入http-vue-loader：html页面中引入VUE组件需要的包 -->
    <!-- <script src="https://unpkg.com/http-vue-loader"></script> -->
    <script src="../node_modules/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../node_modules/axios/dist/axios.min.js"></script>
    <script src="../assets/js/common.js"></script>

</head>

<body>
  <div id="app">
    <!-- 引入头部组件 -->
    <my-header></my-header>

    <section style="margin-top: 80px">
        <div class="container">
            <a href="#">
                <img src="../../assets/images/see.jpg" width="100%" alt=""/>
            </a>
        </div>
    </section>
  
    <section class="mt-3">
      <div class="container">
          <div class="card" style="background-color: white;">
              <div class="card-body">
                <div class="text-center">
                  <h2 class="my-4">{{this.cc.articleName}}</h2>
                  <p>
                    <i class="bi bi-folder2-open opacity-50"></i>
                    <span class="card-text articleMsg">{{this.cc.articleTag}}</span>
<!--                    <i class="bi bi-tags opacity-50 ms-2"></i>-->
<!--                    <span class="card-text articleMsg">连接池</span>-->
                    <i class="bi bi-alarm opacity-50  ms-2"></i>
                    <span class="card-text articleMsg">{{this.cc.updateTime}}</span>
                    <a href="#" class="card-link articleMsg ms-2" >
                      <i class="bi bi-hand-thumbs-up-fill opacity-50" @click="star"></i> {{this.cc.articleStarNum}}
                    </a>
                    <i class="bi bi-book-half opacity-50 ms-2" @click="read"></i>
                    <span class="card-text articleMsg">{{this.cc.articleReadCount}}</span>
                  </p>
                  <hr class="my-4"/>
                  <p class="text-start" v-html="this.cc.articleContent">
                    {{this.cc.articleContent}}
                  </p>
                </div>
                <hr class="my-4"/>
                <div>
                  <h3>相关文章</h3>
                  <ul class="list-group list-group-flush mb-3">
                    <li class="list-group-item" style="border: none;">&bull; 
                      <a href="#" class="text-info article">面试宝典分享</a>
                    </li>
                    <li class="list-group-item">&bull; 
                      <a href="#" class="text-info article">CSDN分享</a>
                    </li>
                  </ul>


                  <div style="background-color: #fafbfc;">
                    <div class="d-flex">
                      <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                      <input class="form-control h-75 mt-3" v-model="comment" placeholder="请输入评论..."/>
                    </div>
                    <button type="button" class="btn btn-primary" @click="postComment" style="width: 100px;margin-left: 55px;">发表评论</button>
                  </div>

                  <hr/>

                  <div v-for="item in commentDate">
                    <div class="delBtn" @click="delComment(item.id)">
                      <i class="bi bi-trash3-fill"></i>
                    </div>
                    <div>
                      <div class="d-flex">
                        <img src="../../assets/images/p28.jpg" alt="" width="40px" class="rounded-circle m-2"/>
                        <div class="mt-1" >
                          <span class="text-dark fw-bolder h6">游客: 
                            <span> {{item.nickname}}ccd</span>
                          </span>
                          <br/>
                          <span>{{item.createTime}}</span>
                        </div>
                      </div>
                      <span style="margin-left: 55px;">{{item.content}}</span>
                      <hr class="my-2"/>
                    </div>
                  </div>
                    <div>
                        <span>每页显示条数：</span>
                        <select v-model="pageSize" @change="handleSizeChange">
                            <option value="10">10</option>
                            <option value="20">20</option>
                        </select>
                        <span>当前页：{{ currentPage + 1 }}</span>
                        <button @click="handleCurrentChange(currentPage - 1)" :disabled="currentPage === 0">上一页</button>
                        <button @click="handleCurrentChange(currentPage + 1)" :disabled="(currentPage + 1) * pageSize >= total">下一页</button>
                        <span>总条数：{{ total }}</span>
                    </div>

                    <!-- my-3【上下外边距1rem】，ps-1【左内边距0.25rem】，pe-4【右内边距1.5rem】，
                      d-flex【开启弹性布局】，justify-content-between【主轴方向两端对齐】 -->
                  <div class="my-3 ps-1 pe-4 d-flex justify-content-between">
                    <p>转载声明：本博客由波波老师创作。可自由转载、引用，
                      但需署名作者且注明文章出处。如转载至微信公众号，请在文末添加作者微信二维码。
                    </p>
                    <img src="../../assets/images/CSDN.png" alt="" width="150px" height="130px"/>
                  </div>
                </div>
              </div>
            </div>
      </div>
    </section>
  </div>

  <script>

    new Vue({
      el:"#app",
      data:{
          cc:{},
          comment:null,
          articleId:null,
          commentDate:[],
          tableList:[],
          pageSize:10,
          currentPage:0,
          total:0,
      },
      methods:{
          handleSizeChange(val) {
              this.currentPage = 0
              this.getCommentAll()
          },
          handleCurrentChange(val) {
              if (val < 0 || (val + 1) * this.pageSize > this.total) {
                  return;
              }
              this.currentPage = val;
              this.getCommentAll();
          },

          getCommentAll(id){
              var data1 = {
                  "page":this.currentPage + 1,
                  "size":this.pageSize,
                  "keyword":this.keyword,
                  "articleId": this.articleId
              }
              this.$http.post("/comment/page",data1).then(res=>{
                  // console.log(res.data.data);
                  this.tableList = res.data.data.content;
                  this.total = res.data.data.totalElements;
                  this.freshComment(this.articleId)
              })
          },
          delComment(id){
              // console.log(id)
              // alert(111)
              this.$http.delete("/comment/"+id).then(res=>{
                  // console.log(res)
                  if(res.data.success){
                      this.freshComment(this.articleId)
                  }
              })
          },
          postComment(){
              if(this.comment == null){
                  return
              }
              var data = {
                  content:this.comment,
                  articleId:this.articleId
              }
              this.$http.post("/comment",data).then(res=>{
                  if(res.data.success){
                      this.freshComment(this.articleId)
                      this.comment = null
                  }
              })
          },
          extractQueryParams(url) {
              const urlObj = new URL(url);
              const params = {};
              urlObj.searchParams.forEach((value, key) => {
                  params[key] = value;
              });
              return params;
          },
          getData(id){
              this.$http.get("/article/"+id).then(res=>{
                  // console.log(res)
                  this.cc = res.data.data
              })
          },
          star(){
              // alert(1111)
              this.$http.get("/article/star/"+this.cc.id).then(res=>{
                  // console.log(res.data.data)
                  // this.cc.articleStarNum = res.data.data
                  // if(!res.data.data){
                  //
                  // }
              })
          },
          read(id){
              // alert(11111)
              this.$http.get("/article/read/"+id).then(res=>{
                  // console.log(res.data.data)
              })
          },
          freshComment(id){
              this.$http.get("/comment/getComment/"+id).then(res=>{
                  this.commentDate = res.data
                  // console.log(res.data)
              })
          }
      },
      mounted() {
          var url =  window.location.href
          var urlId = this.extractQueryParams(url)
          console.log(urlId.id)
          this.articleId = urlId.id
          this.getCommentAll(urlId.id);
          this.getData(urlId.id)
          this.read(urlId.id)
          this.freshComment(urlId.id)
          this.delComment(this.articleId)
      },
      components: {
          // 将组建加入组建库
         'my-header': httpVueLoader('./common/header.vue')
      }
    })
  </script>

</body>

</html>